<template>
  <div class="pointManagement">
    <MetaSearchForm @on-search="tableSearch">
      <el-form ref="pointManagement_form" :model="searchData" label-width="105px">
        <el-form-item label="点位名称" class="pointManagement_formItem">
          <el-input
            v-model="searchData.pointName"
            placeholder="请输入点位名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="设备名称" class="pointManagement_formItem">
          <el-input
            v-model="searchData.alias"
            placeholder="请输入设备名称"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
    </MetaSearchForm>
    <MetaPageTable
      ref="pointManagementTable"
      class="pointManagement_table"
      table-title="点位管理"
      :need-checkbox="false"
      :is-auto-req="false"
      :display-item="displayItem"
      :table-data="equTableData"
      :line-btn-group="lineBtnGroup"
      @lineBtnClick="tableInlineBtnClick"
    />
    <el-dialog
      v-if="equPointRecordFlag"
      title="点位设备变更记录"
      :visible.sync="equPointRecordFlag"
      width="60%"
      modal
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <MetaPageTable
        ref="pointRecordTable"
        class="pointManagement_table"
        table-title="变更记录"
        :need-checkbox="false"
        :is-auto-req="false"
        :display-item="pointRecordDisplayItem"
        :table-data="equPointRecord"
      />
    </el-dialog>
    <el-dialog
      v-if="tableChangeDialogFlag"
      title="点位编辑"
      :visible.sync="tableChangeDialogFlag"
      width="60%"
      modal
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="pointEdit_form"
        :model="itemEditData"
        label-width="130px"
        :rules="editRules"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="点位名称" prop="pointName">
              <el-input
                v-model="itemEditData.pointName"
                placeholder="请输入点位名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="绑定设备">
              <el-select
                v-model="itemEditData.equipmentId"
                placeholder="请选择绑定设备"
                filterable
                class="equipTypeSelect"
              >
                <el-option
                  v-for="item in equipmentList"
                  :key="item.equipmentId"
                  :label="item.alias"
                  :value="item.equipmentId"
                >
                  <span style="float: left">{{ item.alias }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.equipmentName
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="围栏半径">
              <el-input-number v-model="itemEditData.radius" placeholder="请输入围栏半径"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="围栏位置">
              <div class="equipmentPosition">
                <el-input-number v-model="itemEditData.latitude" placeholder="请输入纬度"></el-input-number>
                <el-input-number v-model="itemEditData.longitude" placeholder="请输入经度"></el-input-number>
                <el-button size="small" @click="equipmentLocation(itemEditData)">修改位置</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="省">
              <el-select v-model="itemEditData.province" placeholder="请选择省" @change="provinceHandleChange">
                <el-option
                  v-for="item in provinceList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市">
              <el-select v-model="itemEditData.city" placeholder="请选择市" @change="cityHandleChange">
                <el-option
                  v-for="item in cityList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="区">
              <el-select v-model="itemEditData.area" placeholder="请选择区" @change="areaHandleChange">
                <el-option
                  v-for="item in areaList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <div class="dialogFooter">
        <el-button size="mini" @click="editDialogClose()">取消</el-button>
        <el-button type="primary" size="mini" @click="editDialogSubmit()">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-if="alertPositionFlag"
      title="点位围栏"
      :visible.sync="alertPositionFlag"
      width="60%"
      modal
      :show-close="false"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="alertPositionDialog_bg">
        <div class="alertPositionDialog_header">
          <el-select
            v-model="addrSearchVal"
            filterable
            remote
            clearable
            reserve-keyword
            placeholder="请搜索地点"
            @change="addrSelectListener"
            :remote-method="addrChangeListener"
            class="alertPositionDialog_select"
          >
            <el-option
              v-for="item in addrSelect"
              :key="item.district + item.name"
              :label="item.name"
              :value="item.district + item.name"
            >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.district
              }}</span>
            </el-option>
          </el-select>
          <div class="alertPositionDialog_selfPosition">
            <div
              class="alertPositionDialog_selfPositionBtn"
              @click="toSelfPosition()"
            ></div>
          </div>
        </div>
        <div class="alertPositionDialog_content">
          <div id="equPositionMap" class="alertPositionDialog_map" tabindex="0"></div>
        </div>
      </div>
      <div class="dialogFooter">
        <el-button size="mini" @click="closeProPositionDialog()">取消</el-button>
        <el-button type="primary" size="mini" @click="savealertPosition()"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      v-if="gradeEvaluationFlag"
      title="水质等级评价标准"
      :visible.sync="gradeEvaluationFlag"
      width="60%"
      modal
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="itemEvalutionData"
        ref="itemEvalutionData"
        :rules="rules"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="评价方法" prop="evalutionType">
              <el-select
                @change="evalutionDataChange"
                class="evalutionSelect"
                v-model="itemEvalutionData.evalutionType"
                placeholder="请选择评价方法"
                clearable
              >
                <el-option
                  v-for="item in evalutionTypeList"
                  :key="item.type"
                  :label="item.alias"
                  :value="item.type"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评价模式" prop="evalutionMode">
              <el-select
                @change="evalutionModeChange"
                class="evalutionSelect"
                v-model="itemEvalutionData.evalutionMode"
                placeholder="请选择评价模式"
                clearable
              >
                <el-option
                  v-for="item in evaluateModeList"
                  :key="item.mode"
                  :label="item.alias"
                  :value="item.mode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="参评指标" prop="paramKeys">
          <el-select
            :disabled="evaluateFalg"
            style="width: 100%"
            multiple
            v-model="itemEvalutionData.paramKeys"
            placeholder="请选择参评指标"
          >
            <el-option
              v-for="item in paramKeysList"
              :key="item.keys"
              :label="item.alias"
              :value="item.keys"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="水体类型" prop="waterType">
          <el-select
            :disabled="evaluateFalg"
            @change="ewaterTypeChange"
            style="width: 100%"
            v-model="itemEvalutionData.waterType"
            placeholder="请选择评价模式"
            clearable
          >
            <el-option
              v-for="item in waterTypeList"
              :key="item.type"
              :label="item.alias"
              :value="item.type"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="dialogFooter">
        <el-button size="mini" @click="evaluteDialogClose()">取消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="evaluteDialogSubmit('itemEvalutionData')"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MetaPageTable from "../components/MetaPageTable";
import MetaSearchForm from "../components/MetaSearchForm";
import deepClone from "../utils/deepClone";
export default {
  name: "pointManagement",
  components: {
    MetaPageTable,
    MetaSearchForm,
  },
  data() {
    var checkName = (rule, value, callback) => {
      if (value.trim() === "") {
        return callback(new Error("请输入点位名称"));
      } else {
        return callback();
      }
    };
    return {
      equPointRecordFlag: false,
      alertPositionFlag: false,
      gradeEvaluationFlag: false,
      evaluateFalg: false,
      falgtt: false,
      addrSearchVal: "",
      addrSelect: [],
      equPositionMap: null,
      equipmentPosition: {},
      tableChangeDialogFlag: false,
      waterLevelRuleDialogFlag: false,
      equipmentInfo: {},
      searchData: {
        pointName: "",
        alias: "",
      },
      equTableData: {},
      searchDataForTable: {},
      provinceList: [],
      cityList: [],
      areaList: [],
      displayItem: [
        {
          label: "点位序列号",
          prop: "sernumber",
        },
        {
          label: "点位名称",
          prop: "pointName",
        },
        // {
        //   label: '点位所在地',
        //   prop: 'addr',
        // },
        {
          label: "绑定设备",
          prop: "alias",
        },
      ],
      pointRecordDisplayItem: [
        {
          label: "变更记录",
          prop: "remark",
        },
        {
          label: "变更时间",
          prop: "createDate",
        },
        {
          label: "变更人",
          prop: "createUser",
        },
      ],
      lineBtnGroup: [
        {
          id: "evaluate",
          title: "等级评价",
        },
        {
          id: "edit",
          title: "编辑",
        },
        {
          id: "record",
          title: "查看记录",
        },
      ],
      itemEditData: {
        id: "",
        pointName: "",
        equipmentId: "",
        // latitude: '',
        // longitude: '',
        // radius: '',
        // province: '',
        // city: '',
        // area: '',
        // area_code: '',
      },
      itemEvalutionData: {
        evalutionType: "",
        evalutionMode: "",
        paramKeys: [],
        waterType: "",
      },
      evalutionTypeList: [
        { type: "1", alias: "单指标评价" },
        { type: "2", alias: "综合指标评价" },
      ],
      evaluateModeList: [
        { mode: "0", alias: "常规模式" },
        { mode: "1", alias: "严格模式" },
        { mode: "2", alias: "宽松模式" },
      ],
      paramKeysList: [
        { keys: "PH", alias: "PH" },
        { keys: "dissolvedoxygen", alias: "溶解氧" },
        { keys: "COD", alias: "化学需氧量" },
        { keys: "phosphorus", alias: "总磷" },
        { keys: "NH3N", alias: "氨氮" },
        { keys: "permanganate", alias: "高锰酸盐指数" },
      ],
      waterTypeList: [
        { type: "1", alias: "湖泊水库" },
        { type: "2", alias: "其它" },
      ],

      editRules: {
        pointName: [{ required: true, validator: checkName, trigger: "blur" }],
      },
      equipmentList: [],
      equPointRecord: {},
      rules: {
        evalutionType: [{ required: true, message: "请选择评价方法", trigger: "change" }],
        evalutionMode: [{ required: true, message: "请选择评价模式", trigger: "change" }],
        paramKeys: [
          {
            type: "array",
            required: true,
            message: "请至少选择一项参评指标",
            trigger: "change",
          },
        ],
        waterType: [{ required: true, message: "请选择水体类型", trigger: "change" }],
      },
    };
  },
  created() {},
  mounted() {
    // this.initProvinceList()
    //获取点位型号列表
    this.initTableData(true);
    this.getEquipmentList();
  },
  methods: {
    initTableData(reflash) {
      let params = {};
      params = this.searchDataForTable;
      params.page = 1;
      params.limit = 9999999;
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + 'pointEquipment/getPointEquipmentPage',
        method: "post",
        data: params,
      }).then((res) => {
        if (res.data.code === 200) {
          this.equTableData = res.data.result;
          this.$nextTick(() => {
            this.$refs.pointManagementTable.formDataInit(reflash);
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    getEquipmentList() {
      let params = {};
      params.page = 1;
      params.limit = 9999999;
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + 'admin/equipmentListMap',
        method: "post",
        data: params,
      }).then((res) => {
        if (res.data.code === 200) {
          this.equipmentList = res.data.result.content;
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    initProvinceList() {
      this.initPCAList(0, "province");
    },
    initPCAList(id, type, callback) {
      if (id === "") {
        return;
      }
      let data = {};
      if (type === "province") {
        data.level = 1;
      } else if (type === "city") {
        data.level = 2;
      } else if (type === "area") {
        data.level = 3;
      }
      data.parentid = id;
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/company/area",
        method: "post",
        data: data,
      }).then((res) => {
        if (type === "province") {
          this.provinceList = res.data.result;
        } else if (type === "city") {
          this.cityList = res.data.result;
        } else if (type === "area") {
          this.areaList = res.data.result;
        }
        if (callback && typeof callback === "function") {
          callback();
        }
      });
    },
    provinceHandleChange(id) {
      this.cityList = [];
      this.areaList = [];
      this.itemEditData.city = "";
      this.itemEditData.area = "";
      this.initPCAList(id, "city");
    },
    cityHandleChange(id) {
      this.areaList = [];
      this.itemEditData.area = "";
      this.initPCAList(id, "area");
    },
    areaHandleChange(id) {
      for (let i in this.areaList) {
        if (this.areaList[i].id === id) {
          this.itemEditData.area_code = this.areaList[i].adcode;
          break;
        }
      }
    },
    tableInlineBtnClick(item) {
      if (item.button === "edit") {
        this.itemEditData = {
          id: item.rows.id,
          pointName: item.rows.pointName,
          equipmentId: item.rows.equipmentId,
          // latitude: item.rows.latitude,
          // longitude: item.rows.longitude,
          // radius: item.rows.radius,
          // province: item.rows.province ? parseInt(item.rows.province) : '',
          // city: item.rows.city ? parseInt(item.rows.city) : '',
          // area: item.rows.areaid ? parseInt(item.rows.areaid) : '',
          // area_code: item.rows.area_code,
        };
        // this.cityList = []
        // this.areaList = []
        // this.initPCAList(this.itemEditData.province, 'city', () => {
        //   this.initPCAList(this.itemEditData.city, 'area')
        // })
        this.tableChangeDialogFlag = true;
      } else if (item.button === "record") {
        this.equPointRecord = {};
        this.$fetch({
          url: process.env.PROGOO_GATE_WATER + "pointEquipment/getHistoryListOfPoint",
          method: "get",
          params: {
            pointId: item.rows.id,
          },
        }).then((res) => {
          if (res.data.code === 200) {
            this.equPointRecord = res.data.result;
            for (let i in this.equPointRecord.content) {
              if (
                !this.equPointRecord.content[i].remark ||
                this.equPointRecord.content[i].remark == ""
              ) {
                this.equPointRecord.content[i].remark = this.equPointRecord.content[
                  i
                ].alias;
              }
            }
            this.equPointRecordFlag = true;

            this.$nextTick(() => {
              this.$refs.pointRecordTable.formDataInit(true);
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: res.data.message,
            });
          }
        });
      } else if (item.button === "evaluate") {
        this.itemEvalutionData.id = item.rows.id;
        if (item.rows.evaluationType === "1") {
          this.evaluateFalg = false;
        } else if (item.rows.evaluationType === "2") {
          this.evaluateFalg = true;
        }

        this.itemEvalutionData.evalutionType = item.rows.evaluationType
        this.itemEvalutionData.evalutionMode = item.rows.evaluationMode
        this.itemEvalutionData.waterType = item.rows.waterType

        var arr = (item.rows.paramKeys || "").split(",");
        this.itemEvalutionData.paramKeys = arr;
        this.gradeEvaluationFlag = true;
      }
    },
    tableSearch() {
      this.searchDataForTable = deepClone(this.searchData);
      this.initTableData(true);
    },
    editDialogSubmit() {
      this.$refs["pointEdit_form"].validate((valid) => {
        if (valid) {
          let text = "";
          if (this.equTableData.content && this.equTableData.content.length > 0) {
            text = "是否确认变更当前点位的设备？";
            for (let i in this.equTableData.content) {
              if (
                this.itemEditData.equipmentId == this.equTableData.content[i].equipmentId
              ) {
                if (this.equTableData.content[i].id !== this.itemEditData.id) {
                  text =
                    "您所选择的设备这在被【" +
                    this.equTableData.content[i].pointName +
                    "】点位所使用，一经变更该点位将失去设备关联，是否确认变更？";
                } else {
                  text = "点位信息直接关联用户展示，是否确认修改？";
                }
                break;
              }
            }
          } else {
            text = "是否确认变更当前点位的设备？";
          }
          this.$confirm(text, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            let params = {};
            if (this.itemEditData.id !== "") {
              params.id = this.itemEditData.id;
            }
            params.pointName = this.itemEditData.pointName;
            params.equipmentId = this.itemEditData.equipmentId;
            // params.latitude = this.itemEditData.latitude
            // params.longitude = this.itemEditData.longitude
            // params.radius = this.itemEditData.radius
            // params.province = this.itemEditData.province
            // params.city = this.itemEditData.city
            // params.areaid = this.itemEditData.area
            // params.area_code = this.itemEditData.area_code
            this.$fetch({
              url: process.env.PROGOO_GATE_WATER + "pointEquipment/editInfo",
              method: "post",
              data: params,
            }).then((res) => {
              if (res.data.code === 200) {
                this.editDialogClose();
                this.initTableData(false);
              } else {
                this.$notify.error({
                  title: "错误",
                  message: res.data.message,
                });
              }
            });
          });
        } else {
          return false;
        }
      });
    },
    editDialogClose() {
      this.itemEditData = {
        id: "",
        pointName: "",
        equipmentId: "",
        // latitude: '',
        // longitude: '',
        // radius: '',
        // province: '',
        // city: '',
        // area: '',
        // area_code: '',
      };
      this.tableChangeDialogFlag = false;
    },
    //水质等级评价标准表单保存
    evaluteDialogSubmit(itemEvalutionData) {
      let params = {};
      params.waterType = this.itemEvalutionData.waterType
      params.evaluationMode = this.itemEvalutionData.evalutionMode;
      params.evaluationType = this.itemEvalutionData.evalutionType;
      var templateParanKeys = this.itemEvalutionData.paramKeys.join(",");
      params.paramKeys = templateParanKeys;
      params.id = this.itemEvalutionData.id;
      this.$refs[itemEvalutionData].validate((valid) => {
        if (valid) {
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "pointEquipment/editWaterLevelStandard",
            method: "post",
            data: params,
          }).then((res) => {
            if (res.data.code === 200) {
              this.$notify({
                title: "成功",
                message: "信息保存成功",
                type: "success",
              });

              this.gradeEvaluationFlag = false;
              this.itemEvalutionData = {
                evalutionType: "",
                evalutionMode: "",
                paramKeys: [],
                waterType: "",
              };

              this.initTableData();
            } else {
              console.log("error submit!!");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    evaluteDialogClose() {
      this.itemEvalutionData = {
        evalutionType: "",
        evalutionMode: "",
        paramKeys: [],
        waterType: "",
      };
      this.gradeEvaluationFlag = false;
    },
    waterLevelRuleDialogClose() {},
    waterLevelRuleDialogSubmit() {},
    addrChangeListener(val) {
      let that = this;
      AMap.plugin("AMap.Autocomplete", function () {
        // 实例化Autocomplete
        var autoOptions = {
          //city 限定城市，默认全国
          city: "全国",
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(val, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          that.addrSelect = result.tips;
        });
      });
    },
    addrSelectListener() {
      if (this.addrSearchVal === "") {
        this.addrSelect = [];
      } else {
        for (let i in this.addrSelect) {
          let addr = this.addrSelect[i].district + this.addrSelect[i].name;
          if (addr === this.addrSearchVal) {
            let that = this;
            let center = new AMap.LngLat(
              this.addrSelect[i].location.lng,
              this.addrSelect[i].location.lat
            );
            that.equPositionMap.setCenter(center);
            that.equPositionMap.clearMap();
            that.equipmentPosition = {};
            var marker = new AMap.Marker({
              position: new AMap.LngLat(
                this.addrSelect[i].location.lng,
                this.addrSelect[i].location.lat
              ),
            });
            that.equipmentPosition.lng = this.addrSelect[i].location.lng;
            that.equipmentPosition.lat = this.addrSelect[i].location.lat;
            that.equPositionMap.add(marker);
            break;
          }
        }
      }
    },
    toSelfPosition() {
      if (Object.keys(this.equipmentPosition).length > 0) {
        let center = new AMap.LngLat(
          this.equipmentPosition.lng,
          this.equipmentPosition.lat
        );
        this.equPositionMap.setCenter(center);
      }
    },
    savealertPosition() {
      if (Object.keys(this.equipmentPosition).length > 0) {
        //LDC 保存经纬度
        this.itemEditData.latitude = this.equipmentPosition.lat;
        this.itemEditData.longitude = this.equipmentPosition.lng;
        this.closeProPositionDialog();
      } else {
        this.$notify.warning({
          title: "提示",
          message: "请选择点位位置",
        });
      }
    },
    closeProPositionDialog() {
      this.equipmentPosition = {};
      this.equPositionMap.clearMap();
      this.addrSearchVal = "";
      this.alertPositionFlag = false;
    },
    equipmentLocation(item) {
      // LDC 点位经纬度
      this.alertPositionFlag = true;

      this.$nextTick(() => {
        this.equipmentPosition = {};
        let mapCenter = [];
        if (item.longitude && item.longitude !== "" && item.longitude !== 0) {
          this.equipmentPosition.lng = item.longitude;
          this.equipmentPosition.lat = item.latitude;
          mapCenter = [this.equipmentPosition.lng, this.equipmentPosition.lat];
        } else {
          mapCenter = [117.072723, 39.098484];
        }

        this.equPositionMap = new AMap.Map("equPositionMap", {
          zoom: 15,
          resizeEnable: true,
          center: mapCenter,
          pitch: 0,
          viewMode: "3D",
        });
        // 绑定事件
        this.equPositionMap.on("click", this.clickMapHandler);

        if (Object.keys(this.equipmentPosition).length > 0) {
          var marker = new AMap.Marker({
            position: mapCenter,
          });
          this.equPositionMap.add(marker);
        }
      });
    },
    clickMapHandler(e) {
      this.equPositionMap.clearMap();
      this.equipmentPosition = {};
      var marker = new AMap.Marker({
        position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
      });
      this.equipmentPosition.lng = e.lnglat.getLng();
      this.equipmentPosition.lat = e.lnglat.getLat();
      this.equPositionMap.add(marker);
    },
    evalutionDataChange(e) {
      this.itemEvalutionData.evalutionType = e
      if (e === "1") {
        this.evaluateFalg = false;
      } else if (e == "2") {
        this.evaluateFalg = true;
      }
    },
    evalutionModeChange(e) {
      this.itemEvalutionData.evalutionMode = e
    },
    ewaterTypeChange(e) {
      this.itemEvalutionData.waterType =e
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.pointManagement {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .pointManagement_formItem {
    float: left;
  }
  .pointManagement_table {
    width: 100%;
    overflow-y: unset;
  }
  .equipTypeSelect {
    width: 100%;
  }
  .evalutionSelect {
    width: 100%;
  }
}
.alertPositionDialog_bg {
  height: 600px;
  .alertPositionDialog_header {
    width: 100%;
    height: 60px;
    float: left;
    display: flex;
    .alertPositionDialog_select {
      flex: 1;
    }
    .alertPositionDialog_selfPosition {
      width: 50px;
      padding-left: 10px;
      box-sizing: border-box;
      .alertPositionDialog_selfPositionBtn {
        width: 40px;
        height: 40px;
        background-image: url("~@/assets/images/location.png");
        background-size: 100% 100%;
        cursor: pointer;
      }
      .alertPositionDialog_selfPositionBtn:active {
        background-image: url("~@/assets/images/location_o.png");
      }
    }
  }
  .alertPositionDialog_content {
    width: 100%;
    height: 500px;
    float: left;
    .alertPositionDialog_map {
      width: 100%;
      height: 100%;
      float: left;
    }
  }
}
.equipmentInfo_dialog {
  width: 100%;
  .equipmentInfo_bg {
    max-height: 600px;
    width: 100%;
    overflow: hidden;
    overflow-y: scroll;
    .equipmentInfo_title {
      width: 100%;
      height: 38px;
      font-size: 16px;
      box-sizing: border-box;
      padding: 0 10px;
    }
    .equipmentInfo_text {
      color: #777;
    }
  }
}
.equipmentInfo_dialog .el-dialog__body {
  padding-right: 0px !important;
}
.equParamsSetting_bg {
  width: 100%;
  .equParamsSetting_paramsBg {
    width: 100%;
    height: 500px;
    overflow-y: scroll;
    .equParamsSetting_params {
      width: 100%;
      display: flex;
      .equParamsSetting_paramsItem {
        width: 100%;
        flex: 1;
        margin-bottom: 10px;
        box-sizing: border-box;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        .equParamsSettingItem_backIcon {
          font-size: 18px;
          margin-left: 8px;
          color: #114ca6;
          cursor: pointer;
        }
      }
    }
  }
  .equParamsSetting_paramsTitle {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding-right: 15px;
    .equParamsSetting_paramsItemTitle {
      width: 100%;
      flex: 1;
      margin-bottom: 10px;
      box-sizing: border-box;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      height: 45px;
      color: black;
    }
  }
}
.dialogFooter {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}
</style>
